.docsLayout {
  display: flex;
  min-height: 100vh;
  background: #0a0a0a;

  .docsSider {
    width: 250px;
    background: #1a1a1a;
    border-right: 1px solid #333;
    
    .siderHeader {
      padding: 20px 16px;
      border-bottom: 1px solid #333;
      
      h4 {
        color: #00ff00;
        margin: 0;
        font-size: 16px;
      }
    }
    
    .docsMenu {
      padding: 16px 0;
      display: flex;
      flex-direction: column;
      
      .menuItem {
        color: #e6e6e6;
        text-decoration: none;
        padding: 12px 16px;
        margin: 4px 12px;
        border-radius: 6px;
        transition: all 0.2s ease;
        
        &:hover {
          background: #333;
          color: #00ff00;
        }
      }
    }
  }

  .docsContent {
    flex: 1;
    background: #0a0a0a;
    padding: 0;
    overflow-y: auto;
    max-height: 100vh;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .docsLayout {
    .docsSider {
      width: 200px;
      
      .siderHeader {
        padding: 16px 12px;
        
        h4 {
          font-size: 14px;
        }
      }
      
      .docsMenu {
        padding: 12px 0;
        
        .menuItem {
          margin: 2px 8px;
          padding: 8px 12px;
          font-size: 14px;
        }
      }
    }
  }
}